<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>加班申请-云校通-教师</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<script src="<%=basePath %>/js/picker.js"></script>
<body ontouchstart id="tjjsqj">
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left">
	  		 	<a onclick="back()" href="javascript:;" class="icon icon-109 f-white">返回</a > 
	  		</div>
	    	<h1 class="weui-header-title">加班申请</h1>
	    </div>
		<div class="weui_tab_bd">
	        <div class="weui_cells" style="margin-top:0;">
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label">加班事由</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="overtimeReason" placeholder="请填写加班是由(必填)"/>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label">开始时间</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="startDate" placeholder="请选择加班开始时间(必填)" readonly/>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label">结束时间</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="endDate" placeholder="请选择加班结束时间(必填)" readonly/>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label">加班时长</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" id="overtimeHours" class="weui_input" placeholder="如1小时 、半天、2天"/>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label">加班人员</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="overtimePeople" placeholder="请填写加班人员(必填)"/>
					</div>
				</div>
			</div>
			
			<div class="weui_cells borderLeft xtbg-add-list afterNone mt10">
				<div class="weui_cell weui_cell_select">
	                <div class="weui_cell_hd">
	                    <label class="weui_label">备注说明</label>
	                </div>
	           </div>
		        <div class="bg-f8 f-14 pl15 pr10 pt10 pb10">审批人选择分管部门的领导，如无加班申请，则不计发附加工作量。</div>
	        </div>
	        
			<div class="weui_cells  weui_cells_access">
				<div class="weui_cell" id="check">
					<div class="weui_cell_bd absolut">
	                    <p>审批人</p>
	                </div>
				</div>
				<div class="gzsp_wrap">
					<ul></ul>
					<div id="addBtn"><span class="add"></span></div>
				</div>
			</div>
			
	       <div class="weui_btn_area mb55">
		        <a href="javascript:" class="weui_btn bg-blue" id="btnSubmit">提交申请</a>
		    </div>
		</div>
	</div>
	
	<!--弹窗-->				
	<div class="weui_mask ueureiu weui_mask_visible" style="display: none;z-index:600">
	</div>
	<!--End弹窗-->
	
	<!-- 老师组织架构 start-->
	<div id="ls_div_box" class="weui_tab tab-bottom" style="display:none;z-index: 600;background-color: #fff;">
		<div class="weui_tab_bd">
	        <div class="weui-header bg-blue"> 
	        	<div class="weui-header-left" id="teacherBack"> <a class="icon icon-109 f-white">取消</a>  </div>
				<h1 class="weui-header-title">石门实验中学组织架构</h1>
			</div>
	        
	        <!--下拉选择-->
	        <div class="page-bd">  
		         <ul id="teacherList">
		     	 </ul>
		    </div>
	    	<script id="teacher-table-template" type="text/x-handlebars-template">	
 				{{#each list}}
					<li class="list1">
		                <div class="weui-flex">
		                   	<p class="weui-flex-item js-category"> {{groupName}}</p>
		                    <span class="js-category"><i class="icon icon-74"></i> 下级</span>
		                </div>
		                <div class="page-category js-categoryInner">
							<div class="weui_cells" style="margin: 0;">
								<ul class="list_3">
								{{#each subList}}
						            <li><div class="weui_cell_hd list_c3" style="display: inline-flex;padding-left: 10px;">
											<label class="weui_cells_checkbox weui_check_label" style="padding-right: 15px;" for="{{groupId}}_{{teacherId}}">
												<input type="checkbox" class="weui_check" value="{{teacherId}}" id="{{groupId}}_{{teacherId}}">
					        					<i class="weui_icon_checked"></i>
											</label>
											<label class="tea_name">{{teacherName}}</label>
										</div>
									</li>
								{{/each}}
								</ul>
							</div>
		                </div>
		            </li>
				{{/each}}
			</script>
	    <!--End下拉选择-->
		</div>
	</div>
	
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script>
	var teacherData = {};
	$(function() {
		$("#startDate").datetimePicker({title:"选择日期时间"});
		$("#endDate").datetimePicker({title:"选择日期时间"});
		initWorkApprover('${approvalType}');
		$('#btnSubmit').on('click', function() {
			submit();
		});
		//老师组织架构返回
		$("#teacherBack").click(function() {
			$('.ueureiu').hide();
			$("#ls_div_box").hide();
		});
		//老师组织架构弹出
	  	$("#addBtn").click(function() {
	  		//上下级拉动
			$("#teacherList .js-category").each(function(i, v) {
	    		v.removeEventListener("click", categoryClick, false);
	    		v.addEventListener('click', categoryClick);
	    	})
	  		$('.ueureiu').show();
	  		$("#ls_div_box").show();
			$(".list_c3 input").change(function() {
				var obj = $(this);
				var name = obj.closest(".list_c3").find(".tea_name").html();
				$(".gzsp_wrap>ul").html("");
				$(".gzsp_wrap>ul").append("<li><div class='gzsp'><span>"+name.substr(name.length-2,name.length)+"</span><i data-id='"+obj.val()+"'>"+name+"</i></div></li>");
				if(this.checked) {
					var list = $(this).closest(".page-bd").find(".list_c3 input");
					list.each(function(i, v){
						v.checked = false;
					});
					this.checked = true;
				}
				$("#teacherBack").click();
			});
	  	})
	});
	function submit() {
		var overtimeReason = $("#overtimeReason").val();
		if(overtimeReason.length == 0) {
			$.alert("请填写加班事由!","");
			return;
		}
		var startDate = $("#startDate").val();
		if(startDate.length == 0) {
			$.alert("请选择加班开始时间!","");
			return;
		}
		var endDate = $("#endDate").val();
		if(endDate.length == 0) {
			$.alert("请选择加班结束时间!","");
			return;
		}
		var overtimeHours = $("#overtimeHours").val();
		if(overtimeHours.length == 0) {
			$.alert("请填写加班时长!","");
			return;
		}
		var overtimePeople = $("#overtimePeople").val();
		if(overtimePeople.length == 0) {
			$.alert("请填写加班人员!","");
			return;
		}
		var aObj = $($(".gzsp_wrap").find(".gzsp i"));
		var approverId = emptyToNull(aObj.attr("data-id"));
		if(approverId == null) {
			$.alert("请选择审批人", "");
			return;
		}
		$.confirm("提交申请后2个小时内可以撤销申请", "确认提交申请?", function() {
			$.ajax({
				url: basePath + '/ls/work/approval/apply/submit',
				type: 'post',
				dataType: 'json',
				data: {
					approver: aObj.html(),
					approverId: approverId,
					approvalType: '${approvalType}',
					overtimeReason: overtimeReason,
					startDate: startDate.replace("T"," "),
					endDate: endDate.replace("T"," "),
					overtimeHours: overtimeHours,
					overtimePeople: overtimePeople
				},
				success: function(data) {
					if (data.code == '000') {
						$.toast("申请提交成功！");
						setTimeout(function(){
							window.location.href = basePath + "/ls/work/approval?v=" + new Date().getTime();
						}, 1000);
					} else {
						$.toptips(data.msg);
					}
				}
			});
		}, function() {
        });
	}

	function categoryClick() {
		$parent = $(this).closest('li');
		if($parent.hasClass('js-show')){
            $parent.removeClass('js-show');
            $parent.find('i').removeClass('icon-35').addClass('icon-74');
        }else{
            $parent.siblings().removeClass('js-show');
            $parent.addClass('js-show');
            $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
            $parent.find('i').removeClass('icon-74').addClass('icon-35');
        }
	}
</script>
</html>